<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>

<style>
@font-face {
    font-family: TestFont;
    src: local(Arial), local(Arimo Regular);
}
@font-face {
    font-family: Ahem;
    src: url(../../resources/Ahem.ttf);
}
#test {
    font-family: TestFont;
}
#arial {
    font-family: Arial;
}
#ahem {
    font-family: Ahem;
}
</style>
<script>

promise_test(() => {
  let ahemFace = new FontFace('TestFont', 'url(../../resources/Ahem.ttf)', {});
  assert_equals(ahemFace.status, 'unloaded');
  ahemLoadPromise = ahemFace.load()
  localLoadPromise = document.fonts.ready;

  return Promise.all([ahemLoadPromise, localLoadPromise]).then(() => {
    let testElement = document.getElementById('test');
    let arialElement = document.getElementById('arial');
    let ahemElement = document.getElementById('ahem');

    assert_equals(testElement.offsetWidth, arialElement.offsetWidth);

    addResult = document.fonts.add(ahemFace);
    assert_equals(addResult, document.fonts);
    assert_equals(testElement.offsetWidth, ahemElement.offsetWidth);

    document.fonts.delete(ahemFace);
    assert_equals(testElement.offsetWidth, arialElement.offsetWidth);

    document.fonts.add(ahemFace);
    assert_equals(testElement.offsetWidth, ahemElement.offsetWidth);

    document.fonts.clear();
    assert_equals(testElement.offsetWidth, arialElement.offsetWidth);
  });
}, 'Tests that adding/removing a FontFace to/from a FontFaceSet triggers a ' +
    'font update');

</script>

<br><span id="test">abcdefg</span>
<br><span id="arial">abcdefg</span>
<br><span id="ahem">abcdefg</span>
